<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./CSS/css/reset.css">
    <link rel="stylesheet" href="./fontawesome-free-6.0.0-beta2-web/css/all.css">
    <style>
        /* 设置整个导航栏 */
        .toubu{
            height: 30px;
            border-bottom: 1px solid #ddd;
            background-color: #e3e4e5;
            line-height: 30px;
            
        }
        /* 设置导航栏的内容 */
        .neirong{
            width: 1190px;
            margin: 0px auto;
            line-height: 30px;
            font-size: 12px;
            position: relative;
            z-index: 999;
        }
        /* 设置左侧导航栏的内容 */
        .box1{
            float: left;
            font-size: 12px;
            
        }
        /* 设置左侧导航栏内的图标的颜色以及大小 */
        .box1 .fas{
            font-size: 14px;
            color: #F10215;
        }
        .box1 a i{
            margin-right: 4px;
        }
        .icon-0{
            padding: 0px 7px;
            padding-bottom: 1px;
            border: 1px solid transparent;
            /* 设置相对定位,让城市导航条的优先级大于下拉框的边框,使其接壤的边框消失 */
            position: relative;
            z-index: 9999;
        }
        /* 设置在鼠标移动到左侧导航栏时,城市导航条会出现的变化 */
        .box1:hover .icon-0{
            border-bottom: none;
            background-color: rgb(255, 255, 255);
            border: 1px solid rgb(204, 204, 204);
            border-bottom: 1px solid white;
            
        }
        /* 设置左侧导航栏内的下拉框 */
        .box1 .dropdown-layer-0{
            display: none;
            width: 300px;
            height: 450px;
            border: 1px solid rgb(204, 204, 204);
            /* 设置绝对定位,使其不会影响到下面的其他元素! */
            position: absolute;
            top: 31px;
            z-index: 999;
            /* 设置下拉框的边框的阴影 */
            box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
        }
        /* 设置左侧导航栏在鼠标移动到北京位置后，出现下拉框 */
        .box1:hover .dropdown-layer-0{
            display: block;
        }
        /* 设置右侧导航栏内容的大小和浮动让其向右排序 */
        .box2 {
            float: right;
            font-size: 12px;
        }
        /* 设置右侧导航栏的内容,设置大小,向左排序,并且让其有外边框隔开每个元素的距离 */
        .box2 li{
            float: left;
            margin-right: 8px;
            color: rgb(153, 153, 153);
            font-size: 12px;
        }
        /* 设置右侧导航栏内的字体大小以及字体颜色 */
        .box2 li a{
            color: rgb(153, 153, 153);
            font-size: 12px;
        }
        /* 设置其右侧导航栏内的小横杠,隔开每个文字 */
        .space{
            width: 1px;
            height: 10px;
            margin: 11px 5px 0px 5px;
            background-color: rgb(204, 204, 204);
        }
        /* 设置右侧导航栏内的右侧的图标 */
        .tubiao{
            position: relative;
        }
        .tubiao .icon-1{
            padding: 0px 7px;
            border: 1px solid transparent;
            padding-bottom: 1px;
            position: relative;
            z-index: 9999;
        }
        .tubiao:hover .icon-1{
            border-bottom: none;
            border: 1px solid rgb(204, 204, 204);
            background-color: rgb(255, 255, 255);
            border-bottom: 1px solid white;
           
        }
        .tubiao .dropdown-layer-1{
            display: none;
            width: 280px;
            height: 160px;
            border: 1px solid rgb(204, 204, 204); 
            box-shadow: 0px 2px 2px rgba(0, 0, 0, .2);
            position:absolute;
            top: 31px;
            z-index: 999;
        }
        .tubiao:hover .dropdown-layer-1{
            display: block;
        }
        .tubiao .icon-2{
            /* 设置左右的内边距,与旁边元素拉开距离 */
            padding: 0 7px;
            /* 为其设置一个边框,自动裁剪,以防,被点击后发生其他元素拉伸,transparent则是为了让元素不变色,自动吃裁剪 */
            border: 1px solid transparent;
            /* 为其添加一个1px的内边距,使其顶出1px的位置 */
            padding-bottom: 1px;
            /* 开启相对定位,再+上z-index,提升其优先级,以让之后点击可以使用白色的边框盖住下拉框的边框 */
            position: relative;
            z-index: 9999;

            
        }
        .tubiao:hover .icon-2{
            /* 为其设置一个1px */
            border: 1px solid rgb(204, 204, 204);
            background-color: rgb(255, 255, 255);
            padding: 0px 7px;
            /* 在被点击时,使用1px的边框,把下拉框和按钮相互连接的地方使其用白色掩盖! */
            border-bottom: 1px solid rgb(255, 255, 255);
        }

        .tubiao .dropdown-layer-2{
            width: 140px;
            height: 120px;
            /* 将此元素设置为隐藏 */
            display: none;
            /* 设置边框的大小为1px 实线 颜色为 rgb(153,153,153) */
            border: 1px solid rgb(204, 204, 204);
            /* 设置边框的轮廓(阴影) 上下偏移量为0,左右偏移量为右2 阴影大小为2px 阴影颜色为 无颜色(.2透明度) */
            box-shadow: 0px 2px 2px rgba(0, 0, 0, .2);
            /* 为其开启绝对定位,以让其下拉框出现时,不会影响到下方的元素 */
            position: absolute;
            /* 为其设置绝对定位的位置!绝对与导航栏的31px距离 */
            top: 31px;
            /* 设置其优先级大小 */
            z-index: 999;
        }
        .tubiao:hover .dropdown-layer-2{
            /* 设置元素为块元素 使其自动向下填充! */
            display: block;
        }
        .tubiao .icon-3{
            padding: 0px 7px;
            border: 1px solid transparent;
            padding-bottom: 1px;
            position: relative;
            z-index: 9999;
        }
        .tubiao:hover .icon-3{
            padding: 0px 7px;
            border: 1px solid rgb(204, 204, 204);
            background-color: white;
            border-bottom: 1px solid rgb(255, 255, 255);
        }
        .tubiao .dropdown-layer-3{
            display: none;
            width: 170px;
            height: 250px;
            border: 1px solid rgb(204, 204, 204);
            box-shadow: 0px 2px 2px  rgba(0, 0, 0, .2);
            position: absolute;
            top: 31px;
            z-index: 999;

        }
        .tubiao:hover .dropdown-layer-3{
            display: block;
        }
    
        .tubiao .dropdown-layer-4{
            
            
        }
        /* 设置右侧导航栏距离的位置 */
        .tubiao i{
            margin-left: 10px;
            
        }
        
        /* 设置其右侧导航栏的内的超链接点击后显示红色 */
        .box2 li a:hover{
            color: #F10215;

        }
    </style>
</head>
<body>
    <div class="toubu">
        <div class="neirong">
            <div class="box1">
                <div class="icon-0">
                     <a href="javascript:;" >
                         <i class="fas fa-map-marker-alt"></i>
                         <span>广东</span>
                        </a>
                </div>
                <div class="dropdown-layer-0"></div>
            </div>
            <ul class="box2">
                <li><a href="javascript:;">你好,请登录</a> &nbsp;&nbsp; <a href="javascript:;" style="color: red;">免费注册</a></li>
                <li class="space"></li>
                <li><a href="javascript:;">我的订单</a></li>
                <li class="space"></li>
                <li class="tubiao">
                    <div class="icon-1">
                        <a href="javascript:;">我的京东</a>
                        <i class="fas fa-angle-down"></i>
                    </div>
                    <div class="dropdown-layer-1"></div>
                </li>
                <li class="space"></li>
                <li><a href="javascript:;">京东会员</a></li>
                <li class="space"></li>
                <li class="tubiao">
                    <div class="icon-2">
                        <a href="javascript:;"style="color:red;"  >企业采购</a>
                        <i class="fas fa-angle-down"></i>
                    </div>
                    <div class="dropdown-layer-2"></div>
                    </li>
                </li>
                <li class="space"></li>
                <li class="tubiao">
                    <div class="icon-3">
                        <span>客服服务</span>
                        <i class="fas fa-angle-down"></i>
                    </div>
                    <div class="dropdown-layer-3"></div>
                </li>
                <li class="space"></li>
                <li class="tubiao" id="tt-cion">
                    <div class="icon-4">
                        <span>网站导航</span>
                        <i class="fas fa-angle-down"></i>
                    </div>
                    <div class="dropdown-layer-4"></div>
                </li>
                <li class="space"></li>
                <li><span>手机京东</span></li>
            </ul>
        </div>
    </div>
</body>
</html>